<script setup lang="ts">

import { computed, onMounted, reactive, ref } from 'vue';

    onMounted(()=>{
        // 在这个组件挂载的时候就获取本地存储的习惯列表，如果本地列表没有，就用空的数组
        //  给个 || 的作用是让从本地获取出来的JSON不为空，当为空的时候就返回一个空数组的字符串 然后赋值给代码中的变量
          Object.assign(habits ,
          JSON.parse(  localStorage.getItem('habits-1') || '[]' ) 
          )   

          // 每次加载的时候都要看日期是多久,以便于限制每天只能打卡一次
          getToday()

    })

   
    

    // 与输入框双向绑定
    let input = ref('')

    // 习惯列表
    let habits:any =reactive([])

    // 
    let today = getToday()

    console.log(habits);

    // 当回车添加一条习惯时：
    function  addHabit(){

          // 获取时间戳
          let time = Date.now()
          console.log('这是:Date.now()的值：是当前的时间戳', time);
          console.log( '这是new Date():值：是当前的年月日', new Date());
              
            const habit = {
            id:time,
            //随机0-15的随机数
            url:'url('+ getImgName() +'.svg)',
            // 输入框中输入的内容
            input:input.value,
            // 打开统计
            count:0,
            // 写入的日期
            today:''
          }
          
          

          // 每次点击添加后将对象添加数组开始位置
          habits.unshift(habit)
          console.log(habits);

          // 更新到本地存储
          setLocalHabits()
    
          // 当回车之后要清空输入框
          input.value = ''
    }


    // 用来获取随机的0-15的随机数
    function getImgName(){
        const randomNum = Math.floor(Math.random() * 16); // 生成0到15之间的随机整数
        return randomNum < 10 ? `0${randomNum}` : `${randomNum}`;
    }


    // 用来更新到本地存储的方法
    function setLocalHabits(){
      // 传入的数据要转成JSON格式  JSON.stringify( 【要传入的数据】 )
      localStorage.setItem('habits-1', JSON.stringify(habits) )
    }


    // 点击添加打卡
    function addCount(id:any){
        // habits.array.forEach( (obj:object) => {
        // });
        // 通过id查找匹配的对象，找到后则会把找到的值赋给  obj这个变量
       let obj =   habits.find( (obj:any) => {
            // 返回 true 以表示当前元素满足条件
            // 如果数组中没有满足条件的元素，find 将返回 undefined
            return obj.id === id
        } )

        // 判断是否已经打卡
        if(obj.today !== getToday()){
            // 累加
            obj.count++

            // 重新设置今天的日期,如果再进行点击打卡时，就会来到这个方法进行判断，发现查找的日期等于今天的日期
            // 就不会再累加了 
            obj.today = getToday()

        }

        // 再把数据存放到本地存储
        // localStorage.setItem('habits-1', JSON.stringify(habits) )
        setLocalHabits()

        console.log(obj);
        
    }

    // 获取今天的年月日
    function getToday(){
      let date = new Date()
      return `${date.getFullYear()}/${date.getMonth()+1}/${date.getDate()}`
    }


    // map方法可以用在数组上，他的getter函数可以用来返回每个对象的某个属性值，最后会放到一个数组里面去
    let max = computed(()=>{
      // 由于 Math.max() 方法只能像这样使用：Math.max(1,2,3,4)  由于.map方法返还的是一个数组，所以就用到了apply这个方法
        return Math.max.apply(Math ,habits.map( (item:any) => item.count ) ) 
    })

    // 通过传递索引值来删除数组里的内容
    function remove(index:any){
      // 后悔机制
      if( confirm('确定删除吗') ){
        // 删除
        habits.splice(index,1)
        // 更新本地存储
        setLocalHabits()
      }
       
    }


</script>

<template>
  <div id="app">
    <!--头部-->
    <header>
      <h3>习惯打卡</h3>
      <!-- 回车事件： keyup.enter -->
      <input type="text" class="input" @keyup.enter="addHabit" v-model="input"  placeholder="输入习惯名称，按回车创建">
    </header>
    <!--主体-->
    <section v-cloak>
      <ul class="list">
        <li  v-for="(item,index) in habits " :key="index">
          <!-- 给图标注册点击事件，点击就会打卡，以及打卡后就会隐藏掉原先的图标，显示新的图标 -->
          <span class="icon" v-show="item.today !==today "  :style="{ backgroundImage: item.url }" @click="addCount(item.id)" > {{ item.input }}</span>
          <span class="icon" v-show="item.today ==today "  style="background-image: url('success.svg');"  > {{ item.input }}</span>
          <em><b>{{item.count}}</b> 天 / 共坚持
            <button class="delete" @click="remove(index)">删除</button></em>
        </li>
      </ul>
      <p class="total">共有习惯：{{habits.length}} 个，最大坚持：{{ max }} 天</p>
    </section>
  </div>
</template>

<style scoped>
h3 {
  color: #666;
  text-indent: 2px;
}

.input {
  width: 98%;
  border-radius: 4px;
  height: 35px;
  border: 0;
  background-color: #eee;
  padding: 2px 5px;
  color: #666;
}

.list {
  list-style-type: none;
  margin: 10px 0;
  padding: 0;
}

.list li {
  padding: 8px 5px;
  height: 30px;
  line-height: 30px;
  color: #666;
  font-size: 14px;
  border: 0;
  border-bottom: 1px solid #ccc;
  user-select: none;
}

.list li:hover {
  background-color: #eee;
}

.list li:hover .delete {
  display: inline-block;
}

.list li span.icon {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: left center;
  cursor: pointer;
  text-indent: 32px;
}

.list li em {
  float: right;
  padding-right: 5px;
  font-style: normal;
}

.delete {
  border: 0;
  background-color: transparent;
  background-image: url("delete.svg");
  background-repeat: no-repeat;
  text-indent: -9999px;
  width: 20px;
  cursor: pointer;
  display: none;
}

.total {
  text-align: center;
  color: #666;
}

[v-cloak] {
  display: none;
}
</style>
